import React, { lazy } from "react";
import { Navigate } from "react-router-dom";
// 非懒加载导入
import RouterDemo from "../views/routerDemo/index";
// import ImgDemo1 from "../views/routerDemo/index";
// import ImgDemo2 from "../views/routerDemo/index";
// import ImgDemo3 from "../views/imgDemo3";
// import Module from "../views/module";

// 路由懒加载
const ImgDemo1 = lazy(() => import("../views/imgDemo1"));
const ImgDemo2 = lazy(() => import("../views/imgDemo2"));
const ImgDemo3 = lazy(() => import("../views/imgDemo3"));
const Module = lazy(() => import("../views/module"));

const lazyLoad = (el) => {
  return <React.Suspense fallback={<>加载中...</>}>{el}</React.Suspense>;
};

// const RouterDemo = lazy(() => import('../views/routerDemo'))
const routes = [
  // 重定向
  {
    path: "/",
    element: <Navigate to="/RouterDemo" />,
  },
  {
    path: "/RouterDemo",
    // element: <Navigate to="routerDemo" />,
    element: <RouterDemo />,
  },
  {
    path: "/ImgDemo1",
    // element: <ImgDemo1 />,
    element: lazyLoad(<ImgDemo1 />),
  },
  {
    path: "/ImgDemo2",
    // element: <ImgDemo2 />,
    element: lazyLoad(<ImgDemo2 />),
  },
  {
    path: "/ImgDemo3",
    // element: <ImgDemo3 />,
    element: lazyLoad(<ImgDemo3 />),
  },
  {
    path: "/Module",
    // element: <Module />,
    element: lazyLoad(<Module />),
  },
];

export default routes;
